<template>
  <div>
    <div>
      <div class="body_back" style="width: 100vw;"><img style="width:100%;" src="../assets/image/board/back2.jpeg"></div>
      <div class="header">
        <div class="header_div" style="padding-top: 3vw;"><img style="width: 100%;" src="../assets/image/board/logo.png" /></div>
        <div class="header_div" style="padding-top: 3vw;"><img style="width: 100%;" src="../assets/image/board/title.png" /></div>
        <div class="header_div" style="width: 25vw;">
          <div class="header_time">{{timeStr}}</div>
          <div class="header_date_week"><span style="margin-right: 3vw;">{{dateStr}}</span><span>{{weekStr}}</span></div>
        </div>
      </div>
      <div class="stats">
         <div class="body_back" style="width: 95vw;"><img style="width:100%" src="../assets/image/board/back1.png"></div>
          <div class="stat" style="color: #015a9c;">
            <div class="label">
              <p>服务</p>
              <p>总人数</p>
            </div>
            <p class="number">17458</p>
          </div>
          <div class="stat" style="color: #4eb639;">
            <div class="label">
              <p>防控目标</p>
              <p>达成率</p>
            </div>
            <p class="number">97.3<span class="number_percent">%</span></p>
          </div>
          <div class="stat" style="color: #ff5f5f;">
            <div class="label">
              <p>防控</p>
              <p>风险预警</p>
            </div>
            <p class="number">0.32<span class="number_percent">%</span></p>
          </div>
      </div>
      <div class="studentContain">
        <div class="studentList">
          <div class="listTitle">
            <div style="width: 14vw;">姓名</div>
            <div style="width: 6vw;">年龄</div>
            <div style="width: 15vw;">控涨前度数</div>
            <div style="width: 25vw;">控涨方案</div>
            <div style="width: 15vw;">控涨后度数</div>
            <div style="width: 15vw;">控涨效果</div>
          </div>
          <div class="listContent" v-for="item in studentList" :key="item.id">
            <div class="listContentData" style="width: 14vw;">{{item.name}}</div>
            <div class="listContentData" style="width: 6vw;">{{item.age}}</div>
            <div class="listContentData" style="width: 15vw;">{{item.begin_control}}</div>
            <div class="listContentData" style="width: 25vw;">{{item.plan_name}}</div>
            <div class="listContentData" style="width: 15vw;">{{item.after_control}}</div>
            <div class="result_good listContentDataResult" v-if="item.control_result == 0"><img src="../assets/image/board/good.png">理想</div>
            <div class="result_normal listContentDataResult" v-else-if="item.control_result == 1"><img src="../assets/image/board/normal.png">一般</div>
            <div class="result_bad listContentDataResult" v-else-if="item.control_result == 2"><img src="../assets/image/board/bad.png">较差</div>
          </div>
        </div>
        <div class="studentSign">
          <div class="footer">
            <img class="footer_avatar" src="../assets/image/board/girl.png" alt="用户头像">
            <div class="info">
              <p class="name">{{signStudent.name}}</p>
              <p><span class="info_sex">{{signStudent.sex}}</span> <span class="info_age">{{signStudent.age}}岁</span></p>
              <p class="details">{{signStudent.member_id}}</p>
            </div>
            <div class="project_info">
              <p class="project">今日项目：</p>
              <p class="project_list">{{signStudent.project_name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data() {
    return {
      timeStr: '',
      dateStr: '',
      weekStr: '',
      studentList: '',
      titleData: '',
      signStudent: '',
    };
  },
  mounted() {
    const that = this;
    this.getList();
    that.updateTime();
    setInterval(that.updateTime(), 1000);
  },
  methods: {
    getList() {
      const that = this;
      this.$server
        .fetch('api/board/studentList', {})
        .then((res) => {
          console.log(res);
          that.studentList = res.data;
        });
      this.$server
        .fetch('api/board/totalBoard', {})
        .then((res) => {
          console.log(res);
          that.titleData = res.data;
        });
      this.$server
        .fetch('api/board/signStudent', {})
        .then((res) => {
          console.log(res);
          that.signStudent = res.data;
        });
    },
    updateTime() {
      // 获取当前时间
      const now = new Date();

      // 格式化年份、月份和日期
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
      const date = String(now.getDate()).padStart(2, '0');

      // 获取星期几
      const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const day = days[now.getDay()];

      // 格式化小时和分钟
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');

      // 拼接时间字符串
      this.dateStr = `${year}.${month}.${date}`;
      this.timeStr = `${hours}:${minutes}`;
      this.weekStr = `${day}`;
    }
  }
};
</script>
<style>
.result_good {
  background-color: #4eb639;
}
.result_normal {
  background-color: #b1c108;
}
.result_bad {
  background-color: #ff5f5f;
}
.listContentDataResult {
  width: 15vw;
  padding: 1vw 1vw;
  border-radius: 1vw;
  color: #fff;
  justify-content: center;
  display: flex;
  align-items: flex-start;
}
.listContentDataResult img {
  width: 3.5vw;
  height: 3.5vw;
  margin-right: 0.5vw;
}
.project {
  color: #333436;
  font-size: 4vw;
  font-weight: bold;
}
.project_list {
  color: #333436;
  font-size: 2.5vw;
}
.studentContain {
  margin: 1.5vw;
  border-radius: 3vw;
  background-color: #fff;
  padding: 1vw;
}
.studentList {
  margin: 1vw;
  background-color: #fff7e0;
  border-radius: 3vw;
  padding: 1vw;
  height: 80vw;
}
.listTitle {
  text-align: center;
  display: flex;
  justify-content: space-around;
  color: #514827;
  font-size: 2.5vw;
}
.listContent {
  text-align: center;
  display: flex;
  justify-content: space-around;
  color: #333333;
  font-size: 3vw;
  background-color: #fff;
  border-radius: 1vw;
  padding: 1vw;
  margin: 2vw 0vw;
}
.listContentData {
  background-color: #fffbef;
  border-radius: 1vw;
  padding: 1vw;
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}
.body_back {
  position: absolute;
  z-index: -999;
}
.header {
  display: flex;
  justify-content: space-around;
  color: white;
  padding-top: 5vw;
  padding-bottom: 5vw;
}
.header_div {
  width: 25vw;
  display: inline-block;
}
.header_time {
  font-size: 8vw;
  text-align: center;
  line-height: 8.5vw;
}
.header_date_week {
  text-align: center;
  font-size: 2.5vw;
  line-height: 1vw;
}
.header .title {
  font-weight: bold;
  margin: 0;
}

.header .time {
  margin-top: 5px;
}

.stats {
  display: flex;
  justify-content: space-around;
  padding-bottom: 7vw;
}

.stats .stat {
  text-align: center;
  width: 30vw;
}

.stats .stat .number {
  font-size: 8vw;
  font-weight: bold;
  margin-top: 3vw;
}

.number_percent {
  font-size: 5vw;
}

.stats .stat .label {
  font-size: 4vw;
  margin-top: 5vw;
}

.table-container {
  margin: 10vw 2vw;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

th, td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}

th {
  background-color: #f9f9f9;
  font-weight: bold;
}

.result-good {
  color: green;
  font-weight: bold;
}

.result-average {
  color: orange;
  font-weight: bold;
}

.result-bad {
  color: red;
  font-weight: bold;
}

.footer {
  justify-content: space-around;
  padding: 6vw 2vw 3vw 2vw;
  display: flex;
  align-items: center;
  background: url("../assets/image/board/back4.png");
  background-size: cover;
  background-position: center top;
  border-radius: 5vw;
}

.footer_avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 15px;
  width: 20vw;
}

.footer .info {
  padding-top: 4vw;
  width: 30vw;
  align-self: flex-start;
}
.footer .project_info {
  padding-top: 4vw;
  width: 50vw;
  align-self: flex-start;
}
.info_sex {
  background-color: #4094d2;
  color: #fff;
  padding: 0.2vw;
}
.info_age {
  background-color: #fff;
  color: #4094d2;
  padding: 0.2vw;
}

.footer .info .name {
  font-size: 4vw;
  font-weight: bold;
  margin: 0;
  color: #2c353a;
}

.footer .info .details {
  margin: 5px 0 0 0;
  font-size: 2vw;
  color: #2c353a;
}
</style>
